<template>
	<div class="productions">
		<div class="product-items">
			<div v-for="(item, index) in productItems" :key="item.id" class="item" :class="{'active': action === itemId[index]}" @click="changeItem(item.id)">
				<div v-if="action === itemId[index]" class="active-line"></div>
				{{ item.name }}
			</div>
		</div>
		<div class="product-contents">
			<div class="content-items">
				<div class="item" v-for="item in categorieList" :key="item.id" @click="skipDetail(item.id, item.mindDetailPlayVo)">
					<img :src="item.coverImg" alt="" class="item-img">
					<p class="item-title">{{item.title}}｜{{item.unscramble}}</p>
				</div>
			</div>
		</div>
	</div>

</template>


<script>
	import { getCategories, getListByCategoryId } from "@/utils/api.js";

	export default {
		data(){
			return {
				productItems: [],
				categorieList: [],
				params: {
					data: {
						type: "4"
					}
				},
				itemId: [],
				action: 0
			}
		},
		created(){
			this.init();
		},
		methods:{
			init(){
				this.getCategoriesInfo();
			},
			changeItem(categoriesId) {
				this.action = categoriesId;
				//商品ID
				// https://tsdhapi3.rz158.com/mindMain/getCatetoryListByCodition
				this.getListByCategoryInfo(categoriesId)
			},
			getCategoriesInfo(){
				var paramsCategories = {
					data: {
						type: 4
					}
				}
				getCategories(paramsCategories).then(res => {
					if(res.data.message){
						this.productItems = res.data.result;
						this.productItems.forEach(item => {
							this.itemId.push(item.id);
						})
						this.action = this.$router.currentRoute.query.id || this.itemId[0];
						this.getListByCategoryInfo(this.action)
					}
				}).catch(err => {
					console.log(err, '网络错误')
				})
			},
			getListByCategoryInfo(categoriesId){
				const paramsListByCategory = {
					data:{
						catetory: categoriesId,
						page: 1,
						pageSize: 10
					}
				}
				getListByCategoryId(paramsListByCategory).then(res => {
					this.categorieList = res.data.result;
					console.log( res, 'res');
				}).catch(err => {
					console.log(err, '网络错误 getListByCategoryInfo~~~')
				})
			},
			skipDetail(id, mindDetailPlayVo){
				const uid = this.$router.currentRoute.query.uid
				this.$router.push({path: 'bookDetail', query: { id: id, uid: uid }})
			}
		}
	}

</script>

<style lang="scss">
	.productions{
		display: flex;
		height: 100%;
	}
	.product-items{
		width: 2.06rem;
		height: 100%;
		background: rgb(239, 239, 239);
		overflow: scroll;
		.item {
			position: relative;
			box-sizing: border-box;
			height: 1rem;
			width: 100%;
            font-family:PingFang-SC-Bold;		
			background: rgb(239, 239, 239);
			text-align: center;
			line-height: 1rem;
			color: #282828;
			font-size: 0.3rem;
			border-bottom: .01rem solid #ddd;
			border-right: .01rem solid #ddd;
			box-sizing: border-box;

			&.active{
				background: #fff;
				color: #e71f19;
				border: none;
			}
			.active-line{
				position: absolute;
				top: 0;
				left: 0;
				width: .03rem;
				height: 100%;
				background: rgb(231, 31, 25);
			}
		}
	}
	.product-contents{
		flex: 1;
		.content-items{
			display: flex;
			flex-wrap: wrap;
			height: 100%;
    	overflow: auto;
			.item{
				width: 50%;
				height: 3.72rem;
				padding-top: 0.3rem;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.item-img{
					width: 1.8rem;
					height: 2.4rem;
				}
				.item-title{
					height: 0.7rem;
					padding: 0 .2rem;
					margin-top: .2rem;
					font-size: 0.23rem;
					line-height: 0.35rem;
            		font-family:PingFang-SC-Bold;			
					color: #0a0a0a;
					overflow: hidden;
					text-overflow:ellipsis;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2; 
				}
			}
		}
	}




</style>

